<template>
    <div class="page">
        <img src="http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/h1.gif" class="bgm_image" id="page1_bgm_image"
             ref="bgm_image"></img>

        <!--模糊背景-->
        <div id="div2" class="div" ref="div2">
            <img src="http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/o_1c7r909lh1lj3dep7i0o8a1os71i.jpg" alt="">
        </div>

        <!--文字-->
        <div id="div1" ref="div1" class="div">
            <img src="http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/o_1c7rbgshofcm6bf13ov17f91t0h4m.png" alt="">
        </div>

        <!--飞机-->
        <div id="div3" class="div" ref="div3">
            <img src="http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/feiji.jpg" alt="">
        </div>
    </div>
</template>
<style lang="less" scoped>
    .bgm_image {
        width: 100%;
        height: 100%;
    }

    .div {
        /*background: #eee;*/
    }

    #div1 {
        position: absolute;
        width: px2rem(186);
        height: px2rem(300);
        top: px2rem(300);
        left: px2rem(100);
        transform: scale(2);
        z-index: 3;
    }

    #div2 {
        position: absolute;
        width: 100%;
        height: 100%;
        top: px2rem(0);
        left: px2rem(0);
        z-index: 3;

    }

    /*feiji*/
    #div3 {
        position: absolute;
        width: px2rem(200);
        height: px2rem(250);
        top: px2rem(700);
        left: px2rem(50);
        z-index: 4;
    }

    img {
        height: 100%;
        width: 100%;
    }

    .page {
        width: 100%;
        height: 100%;
        position: relative;
        /*background-image: url("http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/h1.gif");*/
        /*background-size: 100% 100%;*/
    }
</style>
<script>

    export default {
        props: {
            isShow: {
                type: Boolean,

            }
        },
        watch: {
            isShow() {
                this.init()
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            reset() {
                var self = this
                TweenMax.set(this.$refs['div1'], {y: -1000, opacity: 0})
                TweenMax.set(this.$refs['div2'], {opacity: 0})
                TweenMax.set(this.$refs['div3'], {y: 1000},)
                self.$refs['bgm_image'].src = "http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/h1.gif"
            },
            init() {
                var self = this
                const delay = 4000
                this.reset()
                window.clearTimeout(this.time)
                this.time = setTimeout(() => {
                    TweenMax.fromTo(self.$refs['div1'], 1, {y: -1000, opacity: 0}, {y: 0, opacity: 1})
                    TweenMax.fromTo(self.$refs['div2'], .5, {opacity: 0}, {y: 0, opacity: 1})
                    TweenMax.fromTo(self.$refs['div3'], 1, {y: 1000}, {y: 0, rotation: 1})
                }, delay)

            }
        },
        data(props) {
            return {}
        }
    }
</script>
